<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <h3 class="title">好友列表</h3>
        <content_com v-for="item in friends" :key="item.id" :item="item"></content_com>
    </div>


    <template id="content">
        <div class="friend-root">

        <div class="friend" @click="show=!show">
            <p>{{item.name}}</p>
        </div>

    </div>
    </template>

<script>
    let content_com={
        template:'#content',
        props:['item'],
        data(){
            return{
                show:false
            }
        }
    }
    let vm = new Vue({
        el: '#app',
        data: {
        friends:[
            {
                id:1,
                name:'朋友',
                list:[
                    {
                        id:101,name:'小明',sign:'现学现卖',online:'false',
                        id:102,name:'小红',sign:'不会就问',online:'true',
                        id:103,name:'小李',sign:'不会还问',online:'true',
                    }
                ],
            },
            {
                id:2,
                name:'家人',
                list:[
                    {
                        id:201,name:'小张',sign:'长得就那',online:'false',
                        id:202,name:'小付',sign:'长得真帅',online:'true',
                        id:203,name:'小于',sign:'长得还行',online:'false',
                    }
                ],
            },
        ]
        },
        methods: {
            
        },
        componends:{
            content_com,
        }
    });
</script>

</body>

</html>